import React from 'react';
import {Button, Col, message} from 'antd';
import {WeaBrowser, WeaLocaleProvider, WeaTableEditable,WeaSelect} from 'ecCom';
import ProgramItem from "../programItem/ProgramItem";
import {inject, observer} from 'mobx-react';

const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
/**
 * 考核评分人组件
 */
@inject("programItemStore")
@observer
export default class ProgramScore extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            index: "",
            options: [{key: "0",selected: true,showname: getLabel(15558, '依次逐个处理')},
                      {key: "1",selected: false,showname: getLabel(15557, '会签')}],
            showItem:false,
        }
        this.store = this.props.programItemStore;
    }

    render() {
        let {managerid, backSetting, managername, detailList, onDataChange, showStatus, isFromList,scoreattr} = this.props;
        const {getItemDetail,clearForm} = this.store;
        const {options,showItem}= this.state;
        const columns = [{
            title: <span>{getLabel('508672', '评分人')}</span>,
            dataIndex: 'checkusername', key: 'checkusername', width: '30%',
            com: [{
                type: "CUSTOM",
                key: "customrender",
                render: (text, record, index, onEdit) => (
                    <div>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zm53kc@${index}`} span={17}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@av6vxy@hrmid${index}`}
                                replaceDatas={record.checkuserid != undefined ? [{
                                    id: record.checkuserid,
                                    name: record.checkusername,
                                }] : []}
                                type={1}
                                title={getLabel('508672', '评分人')}
                                inputStyle={{width: '95%'}}
                                viewAttr={showStatus ? 3 : 1}
                                onChange={(id, name) => {
                                    if (!this.checkSocreExist(id)) {
                                        onEdit({
                                            type: "CUSTOM",
                                            record: {
                                                ...record,
                                                checkuserid: id,
                                                checkusername: name,
                                            },
                                        });
                                    } else {
                                        onEdit({
                                            type: "CUSTOM",
                                            record: {
                                                ...record,
                                                checkuserid: null,
                                                checkusername: null,
                                            },
                                        });
                                    }
                                }}
                            />
                        </Col>
                        {showStatus &&
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1s03w8@${index}`} span={4} offset={1}>
                            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2mlffq@super${index}`} onClick={() => {
                                if (!this.getManager()) {
                                    if (backSetting) {
                                        onEdit({
                                            type: "CUSTOM",
                                            record: {
                                                ...record,
                                                checkuserid: 0,
                                                checkusername: "直接上级",
                                            },
                                        });
                                    } else {
                                        onEdit({
                                            type: "CUSTOM",
                                            record: {
                                                ...record,
                                                checkuserid: managerid,
                                                checkusername: managername,
                                            },
                                        });
                                    }
                                }
                            }}>{getLabel('15709', '直接上级')}</Button>
                        </Col>
                        }
                    </div>
                )
            }],
        }, {
            title: <span>{getLabel('6071', '权重')}(%)</span>,
            dataIndex: 'rate', key: 'rate', width: '20%',
            com: [{
                type: 'INPUTNUMBER',
                key: 'rate',
                precision: '2',
                max: '100',
                min: '0',
                viewAttr: showStatus ? 3 : 1,
            }],
        }, {
            title: <span>{getLabel('386205', '考核明细')}</span>,
            dataIndex: 'rate', key: 'rate', width: '50%',
            com: [{
                type: "CUSTOM",
                key: "customrender",
                render: (text, record, index, onEdit) => (
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@2032e1@model${index}`}
                        title={getLabel('17858', '模板列表')}
                        viewAttr={showStatus ? 2 : 1}
                        hasAddBtn={showStatus}
                        hasAdvanceSerach={true}
                        addOnClick={() => {
                            this.setState({index});
                            this.store.showStatus = true;
                            this.setState({showItem:true});
                        }}
                        onLinkClick={()=>{
                            this.setState({index});
                            this.store.showStatus = false;
                            getItemDetail(record.templateid);
                            this.setState({showItem:true});
                        }}
                        replaceDatas={record.templateid ? [{
                            id: record.templateid,
                            name: record.templatename,
                        }] : []}
                        onChange={(id, name) => {
                            onEdit({
                                type: "CUSTOM",
                                record: {
                                    ...record,
                                    templateid: id,
                                    templatename: name,
                                },
                            });
                        }}
                        type="wrlperitem"
                        isSingle/>
                )
            }],
        }];

        return <div className="wea-workrelate-performance-programScore"><WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@lvd26n`}
            buttonsType='inline'
            showTitle={showStatus}
            title={<span>{getLabel(125351, '会签属性')}:
                   <span style={{display:"inline-block"}}><WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@htdzhv`} options={options} style={{width:130}} value={scoreattr} viewAttr={showStatus?2:1}
                                    onChange={(v) =>{onDataChange(v,1)}}/></span></span>}
            viewAttr={showStatus ? 2 : 1}
            showCopy={false}
            draggable={showStatus ? true : false}
            columns={columns}
            getRowSelection={(rowSelection) => {
                return !showStatus ? false : rowSelection
            }}
            datas={toJS(detailList)}
            willAdd={(datas) => {
                onDataChange(datas);
                return true;
            }}
            willDelete={(datas) => {
                onDataChange(datas);
                return true;
            }}
            onChange={(datas) => {
                onDataChange(datas);
                return true;
            }}
        />
           {showItem && <ProgramItem ecId={`${this && this.props && this.props.ecId || ''}_ProgramItem@kmdfen`}  showItem = {showItem} onClick={this.programItemClick}/>}</div>
    }
    programItemClick=(id, name,key)=>{
        let{isFromList,detailList,onDataChange} = this.props;
        const {clearForm} = this.store;
        if (!isFromList && key==1) {
            detailList[this.state.index].templateid = id;
            detailList[this.state.index].templatename = name;
            onDataChange(toJS(detailList));
        }
        clearForm();
        this.setState({showItem:false})
    }

    //获取被考核人上级
    getManager = () => {
        let {managerid, backSetting} = this.props;
        if (backSetting) {
            return this.checkSocreExist(0)
        } else {
            if (managerid == '' || managerid == '0') {
                return message.info(getLabel('509117', '直接上级不存在,请重新选择!'));
            }
            return this.checkSocreExist(managerid)
        }
    }

    //检查评分人是否重复
    checkSocreExist = (id) => {
        const {detailList, managerid} = this.props;
        let flag = detailList.find(item => item.checkuserid == id);
        if (flag) {
            message.info(getLabel('509118', '评分人已存在!'));
        }
        return flag;
    }

};